import { defineComponent, ref } from "vue"
import { inject } from "vue"

import VeCheckbox from "amtf/components/checkbox"
import { EMIT_EVENTS } from "../util/constant"
import { useEmitter } from "amtf/hooks"
import emitter from "amtf/utils/emitter"

import { use样式 } from "amtf/hooks"
import { isEmptyValue, getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-header-checkbox-content"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        // checkbox option
        checkboxOption: {
            type: Object,
            default: () => null,
        },
    },
    setup(props) {
        const { dispatch } = useEmitter(inject("表格id"))
        const { 拼样式名_table直属 } = use样式(主名)

        const isSelected = ref(false)
        const isIndeterminate = ref(false)

        // 方法：selectedChange
        const selectedChange = isSelectedParam => {
            isSelected.value = isSelectedParam
            dispatch(EMIT_EVENTS.CHECKBOX_SELECTED_ALL_CHANGE, {
                isSelected: isSelectedParam,
            })
        }

        // 方法：setSelectedAllInfo
        const setSelectedAllInfo = ({ isSelected: newIsSelected, isIndeterminate: newIsIndeterminate }) => {
            isSelected.value = newIsSelected
            isIndeterminate.value = newIsIndeterminate
        }

        onMounted(() => {
            emitter.on(EMIT_EVENTS.CHECKBOX_SELECTED_ALL_INFO, params => {
                setSelectedAllInfo(params)
            })
        })

        return () => {
            const checkboxProps = {
                class: 拼样式名_table直属("checkbox-wrapper"),
                props: {
                    isControlled: true,
                    isSelected: isSelected.value,
                    indeterminate: isIndeterminate.value,
                },
                on: {
                    "on-checked-change": isSelectedParam => selectedChange(isSelectedParam),
                },
            }
            return <VeCheckbox {...checkboxProps} />
        }
    },
})
